<template>  
	<view class="home">  
		<view class="nav">  
			<view class="nav_item">  
				<view class="iconfont icon-ziyuan"></view><text>资源</text>  
			</view>  
			<view class="nav_item">  
				<view class="iconfont icon-shipin"></view><text>视频</text>  
			</view>  
			<view class="nav_item">  
				<view class="iconfont icon-tupian"></view><text>图片</text>  
			</view>  
			<view class="nav_item">  
				<view class="iconfont icon-guanyuwomen"></view><text>关于我们</text>  
			</view>  
		</view>  
	</view>  
</template>  
  
<script>  
	export default {  
		data() {  
			return {  
				  
			}  
		},  
		methods: {  
			  
		}  
	}  
</script>  
  
<style lang="scss">  
    $global-color: #333; // 定义全局颜色变量  
    $shop-color: #ff4500; // 定义商店颜色变量  
  
    .home {  
        .box1 { // 修改选择器为类选择器  
            width: 375rpx;  
            height: 375rpx;  
            background: $global-color;  
            font-size: 30rpx;  
            color: #fff;  
            text {  
                color: pink;  
            }  
            image {  
                height: 100%;  
                width: 100%;  
            }  
        }  
        .nav {  
            display: flex;  
            .nav_item {  
                width: 25%;  
                text-align: center;  
                view {  
                    width: 120rpx;  
                    height: 120rpx;  
                    background: $shop-color;  
                    border-radius: 60rpx;  
                    margin: 10px auto;  
                    line-height: 120rpx;  
                    color: #fff;  
                    font-size: 50rpx;  
                }  
                .icon-tupian {  
                    font-size: 45rpx;  
                }  
                text {  
                    font-size: 30rpx;  
                    color: $shop-color;  
                }  
            }  
        }  
    }  
</style>